<template>    
  <Row :gutter="20" type="flex" justify="center" align="middle" style="height: 100vh">    
    <Col :span="7">    
      <Card title="注册" bordered>    
        <Form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" class="demo-ruleForm">    
          <FormItem label="用户名" prop="userName">    
            <Input v-model="ruleForm.userName" placeholder="请输入用户名" />    
          </FormItem>    
          <FormItem label="邮箱" prop="userEmail">    
            <Input v-model="ruleForm.userEmail" placeholder="请输入邮箱" />    
          </FormItem>    
          <FormItem label="密码" prop="userPassword">    
            <Input v-model="ruleForm.userPassword" type="password" placeholder="请输入密码" />    
          </FormItem>    
          <FormItem label="确认密码" prop="checkPass">    
            <Input v-model="ruleForm.checkPass" type="password" placeholder="请再次输入密码" />    
          </FormItem>    
    
          <div class="demo-auto-login">    
            <Checkbox v-model="autoLogin" size="large" class="checkbox">自动登录</Checkbox>    
            <a @click="regAccout">已有账号? 登录</a>    
          </div>    
          <FormItem>    
            <Button type="primary" @click="submitForm(ruleFormRef)" style="width: 100%">注册</Button>    
          </FormItem>    
        </Form>    
      </Card>    
    </Col>    
  </Row>    
</template>    
    
<script>    
import { reactive, ref } from "vue";    
import { Message } from "view-ui-plus"; // 使用 iView Plus 的消息组件    
import { register } from "@/api/user"; // 移除 sendCode 和 verifyCode API 的引用    
import router from "@/router";    
    
export default {    
  data() {    
    return {    
      autoLogin: true,    
    };    
  },    
  setup() {    
    const ruleFormRef = ref(null);    
    
    // 验证密码是否填写    
    const validatePass = (rule, value, callback) => {    
      if (value === "") {    
        callback(new Error("请输入密码"));    
      } else {    
        callback();    
      }    
    };    
    
    // 验证密码是否匹配    
    const validatePass2 = (rule, value, callback) => {    
      if (value === "") {    
        callback(new Error("请再次输入密码"));    
      } else if (value !== ruleForm.userPassword) {    
        callback(new Error("两次输入的密码不一致！"));    
      } else {    
        callback();    
      }    
    };    
    
    // 表单数据    
    const ruleForm = reactive({    
      userName: "",    
      userEmail: "",    
      userPassword: "",    
      checkPass: "",  // 注意这里为了匹配验证规则中的 prop，我们将确认密码的字段名也改为了 checkPass  
    });    
    
    // 表单验证规则    
    const rules = {    
      userName: [{ required: true, message: "请输入账号", trigger: "blur" }],    
      userEmail: [{ required: true, message: "请输入邮箱", trigger: "blur" }],    
      userPassword: [{ validator: validatePass, trigger: "blur" }],    
      checkPass: [{ validator: validatePass2, trigger: "blur" }],    
    };    
    
    // 表单提交    
    const submitForm = (formEl) => {    
      if (!formEl) return;    
      formEl.validate((valid) => {    
        if (valid) {    
          // 直接提交注册请求    
          register({    
            userName: ruleForm.userName,    
            userEmail: ruleForm.userEmail,    
            userPassword: ruleForm.userPassword,    
          })    
            .then((res) => {    
              if (res.code === 0) {    
                Message.success("注册成功！");    
                router.push("/login");    
              } else {    
                Message.error(res.message);  

              }    
            })    
            .catch(() => {    
              Message.error("注册请求失败，请稍后重试");    
            });    
        } else {    
          Message.error("请检查输入的内容");    
        }    
      });    
    };    
    
    return {    
      ruleFormRef,    
      ruleForm,    
      rules,    
      submitForm,    
    };    
  },    
  methods: {    
    regAccout() {    
      router.push("/login");    
    },    
  },    
};    
</script>  
  
<style scoped>  
.demo-ruleForm {  
  max-width: 400px;  
}  
.demo-auto-login a {  
  width: 30%;  
  height: 20px;  
}  
</style>